<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实验5：图片的DOM操作</title>
		<style type="text/css">
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			fieldset p{width: 225px;word-wrap:break-word;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			.newcss1{background-color: yellowgreen;}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="../img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li><img src="../img/doc.gif">获取原始图片路径</li>
					<li><img src="../img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="../img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li><img src="../img/doc.gif">创建图片</li>
					<li><img src="../img/doc.gif">克隆图片</li>
					<li><img src="../img/doc.gif">改变图片</li>
					<li><img src="../img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="../img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li><img src="../img/doc.gif">为原始图片加上行间样式</li>
					<li><img src="../img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="../img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//菜单收缩与扩展
			function show(item) {
				let currentMenu = document.getElementById(item);
				let currentStatus = currentMenu.style.display;
				currentMenu.style.display = currentStatus == "" ? "none" : "";
			}
			//189000401 邓玉石
			//单击显示图片地址
			var li0 = document.getElementsByTagName('li');//
			var img = document.querySelector("#fruit");
			var kg = 0;
			var xj = 0;
			var xg = 0;
			function f(event){
				let t =  document.getElementById("msg1");
				t.innerHTML = img.src;
			}
			li0[0].onclick = f;
			
			//单击显示获取喜欢的类型
			function x(){
				let check_name = document.getElementsByTagName('input');
				let msg2 = document.getElementById("msg2");
				let love = '';
				console.log(check_name[0]);
				for(var i = 0;i < check_name.length; i++){
					console.log(check_name[i].checked);
					if(check_name[i].checked){
						love = love + check_name[i].value;
						love = love +',';
					}

				}
				msg2.innerHTML ="喜欢类型:"+love;
			}
			li0[1].onclick = x;

			//创建图片
			function c (){
				if(xj == 0){
					let cj = document.getElementById("msg3");
					let img = document.createElement('img');
					cj.appendChild(img);
					img.src="../img/grape.jpg";
					xj = 1 ;
				}
				
			}
			 li0[2].onclick = c;
		 	 //克隆图片
			function k(){
					let kl = document.getElementById("msg4");
					if(kg == 0){
						let img = document.createElement('img');
						kl.appendChild(img);
						img.src = window.img.src;
						kg = 1;
					}
			}
			 li0[3].onclick = k;
			//改变图片
			function g(){
				if(xg == 0){
					console.log(xg);
					window.img.src = "../img/grape.jpg";
					window.xg = 1;
				}
				else{
					console.log(xg);
					window.img.src = "../img/fruit.jpg";
					window.xg = 0;
				}
				
			}
			 li0[4].onclick = g;
			// //删除图片
			function s(){
				window.img.src = " ";
			}
			 li0[5].onclick = s;
			//为原始图片加上行间样式
			function w(){
				img.style.border = "5px solid red";
			}
			li0[6].onclick = w;
			//修改背景
			function xgbj(){
				console.log(0);
				let fields = document.getElementsByTagName("fieldset");
				for(var i = 0; i <fields.length ; i++)
					fields[i].style.backgroundColor = "blue";
			}
			li0[7].onclick = xgbj;
		</script>
	</body>
</html>
